<template>
  <div id="profile">
    <div class="profileWrap">
      <div class="red_box">
        <div class="shezhi_box">
          <router-link to="shezhi">
            <img src="../../../static/images/profile/my33.png" alt="" />
          </router-link>
        </div>
        <div class="people_box">
          <div class="people_box_wrap">
            <div>
              <img
                class="renwuimg"
                src="../../../static/images/profile/my30.png"
                alt=""
              />
            </div>

            <div class="renwuphone">
              <span v-if="flag">{{username}}</span>
              
              <router-link v-else to="/login">登录/注册</router-link>
            </div>
            <div class="lingqu">
              <p>0</p>
              <p>累计领取</p>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content_wrap">
          <div class="list_box">
            <list v-for="item in arr" :key="item.index">
              <template #listimg>
                <router-link :to="item.path">
                  <img class="listpic" :src="item.pic" alt="" />
                  <p class="p1">{{ item.title }}</p>
                </router-link>
              </template>
            </list>
          </div>
          <div class="list_box2">
            <p class="order_p">我的订单</p>
            <div class="list_box2_item">
              <list v-for="item in arr2" :key="item.index">
                <template #listimg>
                  <router-link :to="item.path">
                    <img class="listpic" :src="item.pic" alt="" />
                    <p class="p1">{{ item.title }}</p>
                  </router-link>
                </template>
              </list>
            </div>
          </div>
          <div class="list_box2 list_box3">
            <p class="order_p">更多工具</p>
            <div class="list_box2_item">
              <list v-for="item in arr3" :key="item.index">
                <template #listimg>
                  <router-link :to="item.path">
                    <img class="listpic" :src="item.pic" alt="" />
                    <p class="p1">{{ item.title }}</p>
                  </router-link>
                </template>
              </list>
            </div>
          </div>
          <div class="product_list">
            <p>为你推荐</p>
            <goods :goodsInfo="goodsArr[0]"></goods>
          </div>
        </div>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import list from "./list.vue";
import goods from "./goods/goods";

import tabbar from "../../components/tabbar/tabbar";
export default {
  components: {
    list,
    goods,
    
    tabbar,
  },
  data() {
    return {
      // username: ,
      flag: sessionStorage.getItem("userflag"),
      arr: [
        {
          pic: "../../../static/images/profile/my11.png",
          title: "关注",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my18.png",
          title: "收藏",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my12.png",
          title: "订单",
          path: "/myorder",
        },
        {
          pic: "../../../static/images/profile/my13.png",
          title: "优惠",
          path: "",
        },
      ],
      arr3: [
        {
          pic: "../../../static/images/profile/my20.png",
          title: "全部足迹",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my19.png",
          title: "售后",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my22.png",
          title: "全部评价",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my21.png",
          title: "联系客服",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my23.png",
          title: "地址管理",
          path: "address",
        },
        {
          pic: "../../../static/images/profile/my24.png",
          title: "问题反馈",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my25.png",
          title: "常见问题",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my26.png",
          title: "入住平台",
          path: "",
        },
      ],
      arr2: [
        {
          pic: "../../../static/images/profile/my14.png",
          title: "待付款",
          path: "/myorder",
        },
        {
          pic: "../../../static/images/profile/my15.png",
          title: "待发货",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my16.png",
          title: "待收货",
          path: "",
        },
        {
          pic: "../../../static/images/profile/my17.png",
          title: "待评价",
          path: "",
        },
      ],
      goodsArr: [],
      username:''
    };
  },
  mounted(){
    this.$axios.get('../../../static/data/shop.json').then(res=>{
      console.log(res.data.shopDataArr);
      this.goodsArr.push(res.data.shopDataArr)
      console.log(this.goodsArr);
      
    }).catch(err=>{
      console.log(err);
    })
    if(username){

    }
    let username=JSON.parse(sessionStorage.getItem("uname")) 
    if(username){
 this.username=username.uname;
 console.log(username.uname);
    }else{
      return;
    }
    
   
  }
};
</script>

<style lang="less" scoped>
#profile {
  .profileWrap {
    .red_box {
      height: 285px;
      width: 100%;
      background-color: #fb2c48;
      position: absolute;
      top: 0;
      .shezhi_box {
        display: flex;
        justify-content: flex-end;
        height: 88px;
        position: relative;
        align-items: center;
        right: 40px;
        a {
          position: absolute;
          img {
            height: 48px;
            width: 51px;
          }
        }
      }
      .people_box {
        display: flex;
        height: 105px;
        justify-content: center;
        .people_box_wrap {
          width: 670px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          div {
            font-size: 14px;
            color: ghostwhite;
            .renwuimg {
              height: 105px;
            }
          }
          .renwuphone {
            font-size: 28px;
            position: absolute;
            left: 172px;
            a {
              color: white;
            }
          }
          .lingqu {
            & p:nth-of-type(1) {
              font-size: 36px;
              color: white;
            }
          }
        }
      }
    }
    .content {
      height: 2480px;

      // border: 1px solid blue;
      border-radius: 40px 40px 0 0;
      position: absolute;
      width: 100%;
      top: 250px;
      z-index: 20;
      background-color: #f8f8f8;
      display: flex;
      justify-content: center;
      .content_wrap {
        width: 670px;
      }
      .list_box {
        height: 152px;
        width: 670px;
        background-color: white;
        border-radius: 18px;
        position: absolute;
        top: -30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .listpic {
          height: 46px;
          width: 49px;
        }
      }

      .p1 {
        font-size: 28px;
        color: #333333;
      }
      .list_box2 {
        height: 246.6px;
        width: 670px;
        background-color: white;
        border-radius: 18px;
        /* position: absolute; */
        margin-top: 144px;
        .order_p {
          font-size: 32px;
          text-align: left;
          font-family: PingFang;
          /* font-weight: bold; */
          height: 110px;
          line-height: 76px;
        }
        .list_box2_item {
          display: flex;
          align-items: center;
          justify-content: space-around;

          .listpic {
            height: 52px;
          }
        }
      }
      .list_box3 {
        height: 400px;
        background-color: white;
        border-radius: 18px;
        margin-top: 21px;

        .list_box2_item {
          flex-wrap: wrap;
          display: flex;
          height: 286px;
          div {
            width: 25%;
          }
        }
      }
      .product_list {
        p {
          font-size: 28px;
          text-align: left;
          height: 60px;
          line-height: 60px;
        }
      }
    }
  }
}
</style>